<template>
  <div class='upload-img'>
    <el-upload
      :action="this.$store.state.imgUpload"
      list-type="picture-card"
      :file-list="fileList"
      :on-success="upsuccess"
      :on-error="uperror"
      :limit="uplimit"
      :multiple="multiple"
      accept="image/jpg, image/jpeg, image/png"
      :before-upload="beforeAvatarUpload"
      :auto-upload="true">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img
            class="el-upload-list__item-thumbnail"
            :src="file.url"
          >
          <span class="el-upload-list__item-actions">
            <!-- 预览大图 -->
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <!-- 下载图片 -->
            <span
              class="el-upload-list__item-delete"
              @click="handleDownload(file)"
            >
              <i class="el-icon-download"></i>
            </span>
            <!-- 删除按钮 -->
            <span
              class="el-upload-list__item-delete"
              @click="handleRemove(file,$event)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
    </el-upload>
    <!-- 预览图片组件 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl">
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  props: [
    'uplimit', // 最大上传数
    'multiple', // 是否支持多选
    'fileList'
  ],
  methods: {
    // 删除已上传的图片的方法
    handleRemove (file, e) {
      let that = this
      let parentE = e.currentTarget.parentElement.parentElement.parentElement.parentElement // 获取当前item的父元素
      let leng = parentE.children.length // 获取当前item的父元素的长度
      let imgUrl = file.url // 获取当前上传的图片的路径
      // 利用已知的图片路径，然后循环来匹配当前点击的此项，来获取点击的是第几个对象，然后才能对图片列表进行操作
      for (var i = 0; i < leng; i++) {
        if (parentE.children.item(i).getElementsByTagName('img').item(0).src === imgUrl) { // 匹配路径
          that.fileList.splice(i, 1) // 匹配到后操作图片列表改变视图
          return // 匹配到后结束
        }
      }
    },
    // 预览图片的方法
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 下载图片的方法
    handleDownload (file) {
      console.log(file)
    },
    // 上传图片之前，先验证图片，验证图片格式，大小
    beforeAvatarUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 4 // 大小不超过2M
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
    },
    // 图片上传成功后的回调
    upsuccess (response, file, fileList) {
      // 上传成功后，接收后台返回的图片路径，然后加入到上传列表图片路径中，显示在页面中
      // 子组件传递给父组件,绑定父组件方法，将值传至父组件中的imglist
      this.$emit('putImg', file)
      this.$message.success('文件上传成功')
    },
    // 图片上传失败的回调
    uperror (error, file) {
      console.log(error)
      this.$message.error('图片上传失败，请重试')
    }
  }
}
</script>

<style scoped>
</style>
